﻿<div class="messageBox" tabindex="-1">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" data-bind="click: close" aria-hidden="true">&times;</button>
        <h4 class="modal-title">
            Share Song
        </h4>
    </div>
    <div class="modal-body">
        <h3>
            <img style="max-width: 70px; max-height: 70px; box-shadow: 1px 1px 5px gray;" data-bind="attr: { src: songAlbumArt }" />
            <span data-bind="text: songTitle"></span>
        </h3>
        <ul class="nav nav-tabs">
            <li data-bind="css: { active: activeTabIndex() === 0 }, click: showLink"><a href="#linkSongTabContent">Link</a></li>
            <li data-bind="css: { active: activeTabIndex() === 1 }, click: showEmbed"><a href="#embedSongTabContent">Embed</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane" data-bind="css: { active: activeTabIndex() === 0 }" id="linkSongTabContent">
                <input class="form-control" readonly style="background-color: white; cursor: pointer;" type="text" data-bind="value: songUri" />
                <br />
                <span class="text-muted">Copy this link and paste it into an email, social network, or other web page</span>
            </div>
            <div class="tab-pane" data-bind="css: { active: activeTabIndex() === 1 }" id="embedSongTabContent">
                <textarea class="form-control" readonly rows="8" cols="50" data-bind="value: songEmbedCode" style="cursor: pointer" />
                <br />
                <span class="text-muted">Copy and paste the embed code into any blog or other HTML page.</span>
            </div>
        </div>
                
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-bind="click: close">Done</button>
    </div>
</div>